<!DOCTYPE html>
<html>
    <head>

      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>SGI - {% block title %}{% endblock %}</title> 
      <link href="{{ asset('bundles/chompsgi/css/bootstrap.min.css') }}" rel="stylesheet" media="screen" />
      <link href="{{ asset('bundles/chompsgi/css/bootstrap-responsive.css') }}" rel="stylesheet" />
      <link href="{{ asset('bundles/chompsgi/css/jquery.datetimepicker.css') }}" rel="stylesheet" />

      <link  href="{{ asset('bundles/chompsgi/img/favicon.ico') }}" rel="icon" type="image/x-icon" />
      
      <script type="text/javascript" src="{{ asset('bundles/chompsgi/js/jquery-1.10.2.js') }}" />  </script> 
      <script type="text/javascript" src="{{ asset('bundles/chompsgi/js/bootstrap.min.js')}}" ></script>
      <script type="text/javascript" src="{{ asset('bundles/chompsgi/js/jquery.datetimepicker.js')}}" ></script>
     <!-- <link href="{{ asset('bundles/chompsgi/css/style1.css') }}" type="text/css" rel="stylesheet" /> -->
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <!--
      <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600italic,600,400italic,700italic,800,800italic' rel='stylesheet' type='text/css'>
      <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,300italic,600,600italic,700,900' rel='stylesheet' type='text/css'>
      -->
      <script> 
	  	
		function validar(){
			if($('#fechaDesde').val() != '' && $('#fechaHasta').val() != '' && (Date.parse($('#fechaDesde').val())) <= (Date.parse($('#fechaHasta').val()))){
				$('#searchForm').submit();
			}else{
				alert('Debe completar todos los campos, y la fecha desde debe ser menor o igual a la fecha hasta.');
			}
		}
		
        function activarMenuTab(tabname){
          $(".menuprincipal li").removeClass("active");
          $('#'+tabname).addClass('active');
        }

        function activarActionsTab(tabname){
          $(".actionsColumn li").removeClass("active");
          $('#'+tabname).addClass('active');
        } 

        function hideParentDiv(divName){
          $('#'+divName).parent().css( "visibility", "collapse" );
        }

        function showParentDiv(divName){
          $('#'+divName).parent().css( "visibility", "visible" );
        }

        function showWaiting() {
          $('#waitingOverlay').show();
        }
        function hideWaiting() {
          $('#waitingOverlay').hide();
        }
		
		$(function() {
      $( "#chomp_sgibundle_timesheet_fecha_date" ).datetimepicker({
        format: 'Y-m-d H:i:s'
      });
			$( "#chomp_sgibundle_timesheet_fecha" ).datetimepicker({
				format: 'Y-m-d H:i:s'
			});
			$( "#chomp_sgibundle_incidente_fechaLimiteSLA" ).datetimepicker({
				format: 'Y-m-d H:i:s'
			});
			$( "#chomp_sgibundle_incidente_fechaCierreAutomatico" ).datetimepicker({
				format: 'Y-m-d H:i:s'
			});
			$( "#chomp_sgibundle_incidente_fechaCierre" ).datetimepicker({
				format: 'Y-m-d H:i:s'
			});
			$( "#chomp_sgibundle_incidente_comentarios_0_fechaCreacion" ).datetimepicker({
				format: 'Y-m-d H:i:s'
			});
			$( "#fechaDesde" ).datetimepicker({
				format: 'Y-m-d H:i:s'
			});
			$( "#fechaHasta" ).datetimepicker({
				format: 'Y-m-d H:i:s'
			});

			 	
		  });
      </script>

    </head> 

    <style>

		.inicioForm { 
			position: relative; 
			width: 46%; 
			top: 25px; 
			margin: 10px auto; 
      display:block;
		} 
		
		.mensajeInicio { 
			position: relative;
			width: 52%;
			font-size: 25px;
			margin: 0 auto;
			top: 34px;		
		}

        
		.filaPref
        {
          margin-bottom: 10px;
        }
		
		
    		#chomp_sgibundle_incidente_fechaLimiteSLA
    		{
    			width: 140px;
    		}
    		
    		#chomp_sgibundle_incidente_fechaCierreAutomatico
    		{
    			width: 140px;
    		}
    		
    		#chomp_sgibundle_incidente_fechaCierre
    		{
    			width: 140px;
    		}
    		
    		#chomp_sgibundle_incidente_comentarios_0_fechaCreacion
    		{
    			width: 140px;
    		}
		
		
        .form_preferencias
        {
          border: 1px solid #ddd;
          width: 40%;
          margin: 0 auto;
          padding: 20px;
        }

        .actionsColumn{
          display: block;
          /*background-color: #ddd; 
          min-height: 300px !important; 
          padding: 20px; 
          -webkit-border-radius: 10px;
          -moz-border-radius: 10px;
          border-radius: 10px;
          */
        } 

        .actionsColumn .caret{
          border-top: 4px solid #fff !important;
        }

        .aLink{
          cursor: pointer;
        }

        a{
          color: #B40101;
          font-weight: 600;
        }

        a:hover, a:focus{
          color: #c4302b
        }
         
        .arrowToggle{
          position: relative; top: 100px; height: 20px; width: 15px;  cursor: pointer; float:left; background-color: #fff; left: -10px; border-radius: 50%;
        }

        .btn{
            background: none repeat scroll 0 0 #B40101;
            border: medium none;
            border-radius: 3px;
            box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
            color: #FFFFFF;
            font-family: "Source Sans Pro",sans-serif;
            font-size: 14px;
            font-weight: 900;
            line-height: 15px;
            padding: 7px 13px 8px;
            text-decoration: none;
            text-shadow: none;
            text-transform: uppercase;
        } 

        .btn.middle-first{
          margin-top: 20px; 
          margin-left: 30% !important;
          float: left;
        } 

        .btn.middle-first-of-three{
          margin-top: 20px; 
          margin-left: 20% !important;
          float: left;
        } 

        .btn.middle-second{
          margin: 20px;
        }

        .btn.middle-second-of-three{
          margin: 20px 0 20px 20px;
          float: left;
        }

        .btn.middle-third-of-three{
          margin: 20px ;
          float:left;
        }

        .btn-big{
            font-size: 18px;
            font-weight: 900;
            line-height: 20px;
            padding: 7px 15px 10px;
        }

        .btn + .btn {
            margin-left: 10px;
        }

        .btn.descarga{
          color: #222;
          background-color: #f2f2f2;
          display:block; 
          float: right;
          margin: 20px 0;
        }

        .btn.descarga:hover{
          background-color: #222;
          color: #fff;
        }

        .btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
            background-color: #c4302b;
            color: #fff;
        }


        body {
          /*
          font-family: Verdana, Geneva, sans-serif;
          font-size: 14px;
          font-weight: normal;
          */
          font: 400 16px/1.45 'Source Sans Pro',Helvetica,Arial,Verdana,sans-serif;
          color: #333333;
          background-color: #fff;
          /* color: #656566;
          background: url("{{ asset('/bundles/chompsgi/img/bg-content.jpg') }}") repeat scroll 0 0 #1F1E21 */
          
        }

        .caret{
          vertical-align: text-top;
        }

        #confirmMsg{
          top: -40% ;
        }

        #confirmMsg.fade.in{
          top: 40% !important;
        }

        .container{
          width: 1105px !important;
          max-width: 100% !important;
        }

        .container ul>li{
          line-height: 48px;
        }

        .container ul>li.divider-vertical{
          height: 100%;
          max-height: 65px;
        }

        .content{ 
          width: 1024px;
          margin: 0 auto;
          display:block;
        }

        .contentColumn{
          display: block;
          margin-left: 2px !important;
           /*min-height: 500px; 
           padding: 20px;
           -webkit-border-radius: 10px;
           -moz-border-radius: 10px;
           border-radius: 10px;*/
        }


        .contentColumn.span9 { 
          
        }

        .contentColumn.span12{
        }
		
      .dropdown-menu{
        text-transform: none !important;
        letter-spacing: 0px !important
      }

        .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus,
        .dropdown-menu >li > a:hover,
        .dropdown-menu >li > a:focus
        .dropdown-menu >li.active > a:focus{
          background: -moz-linear-gradient(center top , #9F1103 0%, #b40101 100%) repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
          background: -webkit-linear-gradient(90deg, #9F1103, #b40101) !important; /* For Safari 5.1 to 6.0 */
          background: -o-linear-gradient(90deg, #9F1103,#b40101) !important; /* For Opera 11.1 to 12.0 */
          background: -moz-linear-gradient(90deg, #9F1103, #b40101) !important; /* For Firefox 3.6 to 15 */
          background: linear-gradient(90deg, #9F1103, #b40101) !important;
        }

        .dropdown-menu i{
          vertical-align: bottom; padding: 0px 2px 2px 0;
        }

        .footer{
          display:block;
          text-align: center;
          font-weight: normal;
          font-size: 12px;
          padding: 20px 0;
          color: #515151;
          background: -moz-linear-gradient(center top , #F4F4F4 0%, #F1F1F1 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
          position: fixed;
          bottom: 1px;
          border-bottom: 1px solid #848484;
          border-top: 1px solid #F6F6F6;
          width: 100%;
        }

        .form_row{
          margin: 20px auto;
          width: 100%;
          overflow: auto;
        }

        .form_row2{
          margin: 8px auto;
          width: 48%;
          overflow: auto;
          float: left;
        }

        .form_row3{
          margin: 8px auto;
          width: 100%;
          overflow: auto;
          float: left;
        }

        .form_row2 div.outputText{
          display:block;
          float: left;
          padding-top: 5px;
        }

        .form_row label{
          display: block;
          float: left;
          font-weight: bold;
          margin: 0;
          padding-right: 2%;
          padding-top: 5px;
          text-align: right;
          width: 25%;
          font-size: 16px !important;
        }

        .form_row.output label{
            padding-top: 2px;
        }

        .form_row2 label{
          display: block; 
          float: left;
          font-weight: bold;
          margin: 0;
          padding-right: 2%;
          padding-top: 5px;
          text-align: right;
          width: 43%;
          font-size: 16px;
        }

        .form_row2 .readOnly{
          font-style: italic;
          display: block;
          float: left;
          margin: 0;
          margin-right: 3%;
          padding-top: 5px;
          width: 45%;
        }

        .form_row2 input{
            display: block;
            float: left;
            margin: 0;
            margin-right: 3%;
            padding: 5px 5px auto auto;
            width: 52%;
        }

        .form_row input{
            display: block;
            float: left;
            margin: 0;
            margin-right: 3%;
            padding: 5px 5px auto auto;
            width: 22%;
        }

        .form_row .errorMsg{
          display: block;
          float: left;
          font-weight: bold;
          margin: 0;
          padding-top: 5px;
          text-align: left;
          width: 42%;
          color: #BD362F; 
          font-style: italic;
        }

        .form_row .errorMsg > ul, .form_row3 .errorMsg >ul{
          list-style-type: none;
          margin: 0;
        }
        .form_row .errorMsg > ul > li, .form_row3 .errorMsg >ul > li{
          line-height: 20px;
        }

        .form_row3{
          margin: 8px auto;
          width: 100%;
          overflow: auto;
        }

        .form_row3 label{
          display: block;
          float: left;
          font-weight: bold;
          margin: 0;
          padding-right: 2%;
          padding-top: 5px;
          text-align: right;
          width: 20%;
          font-size: 16px;
        }

        .form_row3 input,
        .form_row3 textarea{
            display: block;
            float: left;
            margin: 0;
            margin-right: 3%;
            padding: 5px 5px auto auto;
            width: 47%;
        }
        .form_row3 .errorMsg{
          display: block;
          float: left;
          font-weight: bold;
          margin: 0;
          padding-top: 5px;
          text-align: left;
          width: 26%;
          color: #BD362F; 
          font-style: italic;
        }

        h1{
          font-family: 'Source Sans Pro';
          text-shadow: 2px 1px #DDD;
          font-weight: 700;
        }

        h2 {
          color: #333333;
          font-family: 'Source Sans Pro';
          font-size: 2em;
          font-style: normal;
          font-weight: 600;
          margin-bottom: 10px;
          text-shadow: 1px 1px #dddddd;
        }

        h3 {
          margin: 10px 0;
          text-shadow: 1px 1px #DDD;
          font-family: 'Source Sans Pro';
          font-style: normal;
          font-weight: 400;
        }

        h4{
          font-family: 'Source Sans Pro';
          font-style: normal;
          font-weight: 400;
        }

        .hidden{
          display: none;
        }

        .incidente-container{
          -webkit-box-shadow: 1px 0px 28px -6px rgba(235,232,235,1);
          -moz-box-shadow: 1px 0px 28px -6px rgba(235,232,235,1);
          box-shadow: 1px 0px 28px -6px rgba(235,232,235,1);
          background: -moz-linear-gradient(center top , #fff, #fdfdfd) repeat scroll 0 0 #fdfdfd; 
		  border: 1px solid #d5d5d5; 
		  padding: 35px; 
		  display:block; 
          border-radius: 4px;
        }

          .incidente-container .container{
            padding: 10px 10px 20px;
            border: 1px solid #f4f4f4;
            border-radius: 5px;
          }


          .incidente-container .container+.container{
            margin-top: 30px;
          }

            .incidente-container .container .title{
              margin: -12px 0 0 10px; background-color: #fff; max-width: 50%; display:block; float:left; padding: 0 3px
            }

            .incidente-container .container ul>li{
              line-height: 30px;
            }

          .incidente-container .container.output .form_row2>label{
            
            padding-top: 2px !important;
          }

        .incidente-row{

        }
          .incidente-row.green{
            background-color: #87C387;
          }

          .incidente-row.red{
            background-color: #D46F6F;
          }

          .incidente-row.yellow{
            background-color: #FFFFC4;
          }

          .incidente-row.blue{
            background-color: #A7BCE8;
          }
            

        input, textarea, .uneditable-input {
          width: 94%;
        }

        input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus,input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus, textarea:focus{
  		    border-color: rgba(0, 0, 0, 0.3) !important;
  		    box-shadow: 0 1px 1px rgba(96, 96, 96, 0.3) inset, 0 0 6px rgba(96, 96, 96, 0.8) !important;
  		    outline: 0 none;
		    }

        .menuprincipal{
          text-transform: uppercase;
          letter-spacing: 1px;
          font-weight: 600;
        }

        .navbar-inner{
          border-radius: 0;
        }

        .navbar-inverse .nav .active>a{
        	background-color: #363636;
        }
        
        .navbar .btn-navbar {
          float:left;
        }

        .nav-collapse_ .nav > li.sfHover > a, .nav-collapse_ .nav > li.sfHover > a:hover, .nav-collapse_ .nav > li > a:hover, .nav-collapse_ .nav > li.active > a, .nav-collapse_ .nav > li.active > a:hover {
            background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
            box-shadow: none;
            color: #c4302b;
        }

        .nav-tabs, .nav-pills {
            width: 100%;
        }

        #searchForm{
          display:block; 
          overflow: auto
        }

        .sidebar-nav select,.sidebar-nav textarea,.sidebar-nav input[type="text"],.sidebar-nav input[type="password"],.sidebar-nav input[type="datetime"],.sidebar-nav input[type="datetime-local"],.sidebar-nav input[type="date"], .sidebar-nav input[type="month"], .sidebar-nav input[type="time"], .sidebar-nav input[type="week"], .sidebar-nav input[type="number"], .sidebar-nav input[type="email"], .sidebar-nav input[type="url"], .sidebar-nav input[type="search"], .sidebar-nav input[type="tel"], .sidebar-nav input[type="color"], .sidebar-nav .uneditable-input{
          margin: 0;
          padding: 3px 2%;
          width: 95%;
        }

        .sidebar-nav{
           padding: 0 0 20px !important;
           margin-right: 20px;
        }

        .sidebar-nav select{
          width: 100%;
        }

        .panel-body{
          text-align: center;
        }

        .panel-group{
          margin: 20px;
        }


        .table-striped tbody > tr:nth-child(2n+1) > td, .table-striped tbody > tr:nth-child(2n+1) > th{
          background-color: #e8e8e8 !important;
        }

        .table input[type="checkbox"] {
          margin-top: 0 !important; 
        }

        .tabs-left > .nav-tabs > li, .tabs-right > .nav-tabs > li{
          text-align: right;
        }

        .tabs-left > .nav-tabs > li > a {
            padding-right: 20px;
        }

        .tabs-left > .nav-tabs > li > a:hover {
          color: #fff;
          /*background-color: #CF3046 ;*/
          background-color: #c4302b;
        }

        .tabs-left > .nav-tabs > li.active > a{
          color: #fff;
          /*background: -moz-linear-gradient(center top , #b40101 50%, #9F1103 50%) repeat scroll 0 0 rgba(0, 0, 0, 0);
          background: -moz-linear-gradient(right, #B40101 70%, #FFFFFF 100%);*/
          background-image: -o-linear-gradient(top, #D81B1B 23%, #B40101 70%);
          background-image: -moz-linear-gradient(top, #D81B1B 23%, #B40101 70%);
          background-image: -webkit-linear-gradient(top, #D81B1B 23%, #B40101 70%);
          background-image: -ms-linear-gradient(top, #D81B1B 23%, #B40101 70%);
          background-image: linear-gradient(to top, #D81B1B 23%, #B40101 70%);

        }

        .tabbable {
            width: 100%;
        }

        table.listado tr > th,
        table.listado tr > td{
          text-align: center;
        }

        .theContent{
          padding-left: 30px;
        }

        select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input{
          margin-bottom: 0 !important;
        }

        .well{
          overflow-y: auto;
        }


        .waitingg{
            display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; 
            z-index: 9999; cursor: wait; background-color: rgba(100, 100, 100, 0.3);
        }
        .waitingg-div {
            position: absolute; top: 45%; right: 45%; border-radius: 6px; min-width: 100px;
        }
		
		.filtros{
			width: 150px; 
			margin-right: 2px;
		}
    </style>


    <body>
        
        {% block formtheme %}{% endblock %}
         
        <div id="waitingOverlay" class="waitingg">
          <div id="waitingDiv" class="waitingg-div"> &nbsp;
          </div>
        </div>

        <!-- COMMON HEADER -->
        <div class="navbar  navbar-inverse">
            <div class="navbar-inner">
                <div class="container">
                  <div>
                     {% set firstPass = app.session.get('firstPass') %}
                     {% if firstPass == 'si' %}

                      <ul class="nav pull-left">
                        <li id="logo">
                            <img src="{{ asset('bundles/chompsgi/img/logoChicoV6.png') }}" />
                        </li>
                      </ul>
                      
					           {% endif %}
					 
                    {% if firstPass == 'no' %}
	                  <ul class="nav pull-left">
                        <li id="logo">
                          <a href="{{path('chompsgi_inicio')}}" style="text-align:center; margin: 0 ;">
                            <img src="{{ asset('bundles/chompsgi/img/logoChicoV6.png') }}" />
                          </a>
                        </li>
                      </ul>
                     {% endif %}

					          {% if firstPass == '' %}
	                  <ul class="nav pull-left">
                        <li id="logo">
                          <a href="{{path('chompsgi_inicio')}}" style="text-align:center; margin: 0 ;">
                            <img src="{{ asset('bundles/chompsgi/img/logoChicoV6.png') }}" />
                          </a>
                        </li>
                      </ul>
                     {% endif %}
					  
					 {% set userName = app.session.get('userName') %}
			          {% if userName != 'false' %}
                          {% set permisos = app.session.get('permisos') %}
                          {{ knp_menu_render('main_menu', {'currentClass': 'active', 'template': 'CHOMPSGIBundle:Default:knp_menu.html.twig'}) }}
					                <ul class="nav pull-right">
                            <li class="divider-vertical"></li>
 
					  {% set firstPass = app.session.get('firstPass') %}
                      {% if firstPass == 'no' %}
                            <li class="dropdown pull-right">
                                <a href="#" class="dropdown-toggle sr-only" id="dropdownMenu1" data-toggle="dropdown">
                                  {% set nomRol = app.session.get('nombreRol') %}
                                  <i><b>{{ userName }} ( {{ nomRol}} )</b></i>
                                  <b class="caret"></b>
                                </a>

                                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                                  <li role="presentation">
                                    <a role="menuitem" tabindex="-1" href="{{ path('chompsgi_preferencias') }}">
                                      <i class="icon-cog"> </i>
                                      Preferencias
                                    </a>
                                  </li>
                                  <li role="presentation">
                                    <a role="menuitem" tabindex="-1" href="{{ path('chompsgi_closeSession') }}">
                                      <i class="icon-off"> </i>
                                      Cerrar Sesi&oacute;n
                                    </a>
                                  </li>
                                </ul>
                            </li>
                      {% endif %}
                      {% if firstPass == '' %}
                            
					  	{% set permisos = app.session.get('permisos') %}
                            {% if permisos != '' %}
								<li class="dropdown pull-right">
									<a href="#" class="dropdown-toggle sr-only" id="dropdownMenu1" data-toggle="dropdown">
									  {% set nomRol = app.session.get('nombreRol') %}
									  <i><b>{{ userName }} holaa ( {{ nomRol}} )</b></i>
									  <b class="caret"></b>
									</a>
	
									<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
									  <li role="presentation">
										<a role="menuitem" tabindex="-1" href="{{ path('chompsgi_preferencias') }}">
										  <i class="icon-cog"> </i>
										  Preferencias
										</a>
									  </li>
									  <li role="presentation">
										<a role="menuitem" tabindex="-1" href="{{ path('chompsgi_closeSession') }}">
										  <i class="icon-off"> </i>
										  Cerrar Sesi&oacute;n
										</a>
									  </li>
									</ul>
								</li>
	                      {% endif %}
                      {% endif %}

                          </ul>	
                      {% endif %}

                    </div>
                </div> 
            </div> 
        </div>

        <!-- Todo el ancho de la pagina-->
        <div class="container-fluid">  
            <div class="row-fluid">  
              
               <div class="row-fluid" >
                  {% for flashMessage in app.session.flashbag.get('msgError') %}
                      <div class="span4 offset4" >
                        <div class="alert alert-block fade in alert-error">
                          <button type="button" class="close" data-dismiss="alert">&times;</button>
                        <h4>{{ flashMessage }}</h4> 
                      </div>
                      </div>
                  {% endfor %}
                  {% for flashMessage in app.session.flashbag.get('msgWarn') %}
                      <div class="span4 offset4" >
                        <div class="alert alert-block fade in alert-warning">
                          <button type="button" class="close" data-dismiss="alert">&times;</button>
                        <h4>{{ flashMessage }}</h4>
                      </div>
                      </div>
                  {% endfor %}
                  {% for flashMessage in app.session.flashbag.get('msgOk') %}
                      <div class="span4 offset4" >
                        <div class="alert alert-block fade in alert-success">
                          <button type="button" class="close" data-dismiss="alert">&times;</button>
                        <h4>{{ flashMessage }}</h4>
                      </div>
                      </div>
                  {% endfor %}
                  {% for flashMessage in app.session.flashbag.get('msgInfo') %}
                      <div class="span4 offset4" >
                        <div class="alert alert-block fade in alert-info">
                          <button type="button" class="close" data-dismiss="alert">&times;</button>
                        <h4>{{ flashMessage }}</h4>
                      </div>
                      </div>
                  {% endfor %}
                </div>

              {% block body %}
                <div class="row-fluid">

                 <!-- Columna izquierda -->
                  <div class="actionsColumn span3">
                    <div class="tabbable tabs-left pull-right"> 
                      {% block actionsColumnBlock %}
                          {% set userName = app.session.get('userName') %}
                          
                          {% if userName != 'false' %}
                              {{ knp_menu_render('menu_left', {'currentClass': 'active'}) }}
                          {% endif %} 
                      {% endblock %}
                    </div>
                  </div>

                  
                  <!-- CONTENIDO -->
                  <div class="span9 contentColumn">
                    <div class="arrowToggle">
                      <i class="icon-chevron-left"></i>
                    </div>
                    <div class="theContent">
                      {% block content %} 
                        
                      {% endblock %} 
                    </div>
                  </div>

                </div>
              {% endblock %}
            </div>
        </div> 


        <script>
           $('.arrowToggle').click(function() {
              if ($('.actionsColumn').css('display') == 'none'){
                  
                  $('.contentColumn').addClass('span9').removeClass('span12');
                  window.setTimeout ( function(){
                      $('.actionsColumn').toggle('slide');
                      $('.icon-chevron-right').addClass('icon-chevron-left').removeClass('icon-chevron-right');
                    },1);

              }else{
                $('.actionsColumn').toggle('slide');
                window.setTimeout ( function(){
                      $('.icon-chevron-left').addClass('icon-chevron-right').removeClass('icon-chevron-left');
                      $('.contentColumn').addClass('span12').removeClass('span9'); 
                      },
                    500);
              }
            });
        </script>
    </body>

</html>